<template>
  <!-- <div class="container" @click="clickHandle('test click', $event)"> -->
  <div class="container" >
    <div class="userinfo" @click="bindViewTap">
      <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />
      <div class="userinfo-nickname">
        <card :text="userInfo.nickName"></card>
      </div>
    </div>

    <!-- <div class="usermotto">
      <div class="user-motto">
        <card :text="motto"></card>
      </div>
    </div> -->
    <div class="title">歌词押韵搜索</div>
    <form class="form-container">
      <input type="text" class="form-control" v-model="motto" placeholder="v-model" />
      <!-- <input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" /> -->
    </form>
    <a  @click="searchirc" class="counter">搜索</a>
    <div v-for="item in ircdata" >
        <p class="item">{{item['content']}}</p>
    </div>

    <a v-if="nextBtnShow == 'true'" @click="searchNext" class="counter">下一页</a>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      motto: '意义',
      pagenum: 1,
      nextBtnShow: 'false',
      userInfo: {},
      ircdata:[]
    }
  },

  components: {
    card
  },

  methods: {
    // 搜索数据
    searchirc () {
      // console.log(this.motto)
      var self = this
      self.pagenum = 1
      self.ircdata = []
      wx.request({
        url: 'http://btsousou.cn:8080/td/'+self.motto+'/'+self.pagenum, //仅为示例，并非真实的接口地址
        data: {},
        header: {
            'content-type': 'application/json' // 默认值
        },
        success: function(res) {
          console.log(res.data.result)
          self.ircdata = res.data.result
          self.nextBtnShow = 'true'
        }
      })
    },
    searchNext() {
      var self = this
      self.pagenum += 1
      wx.request({
        url: 'http://btsousou.cn:8080/td/'+self.motto+'/'+self.pagenum, //仅为示例，并非真实的接口地址
        data: {},
        header: {
            'content-type': 'application/json' // 默认值
        },
        success: function(res) {
          console.log(res.data.result)
          self.ircdata = res.data.result
          
        }
      })
    },
    bindViewTap () {
      const url = '../logs/main'
      wx.navigateTo({ url })
    },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
    },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
    this.getUserInfo()
  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title{
  margin: 10px 0;
}
.item{
  margin: 10px 0;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.counter {
  display: inline-block;
  margin: 10px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>
